<template>
	<view class="login">
		<view class="photo">
			<image src="../../static/assets/photo.png" alt="" mode="widthFix" />
		</view>
		<input class="phone" type="text" placeholder="请输入手机号" v-model="phone"/>
		<input class="password" type="text" placeholder="请输入密码" v-model="password"/>
		<button class="btn" @click="LoginFn">登录</button>
		<view class="bottom">
			<text @click="goRegister">注册</text>
			<text @click="clearFn">重置</text>
		</view>
	</view>
</template>

<script>
	import { loginFn } from '../../api/index.js';
	export default {
		data() {
			return {
				phone:"",
				password:""
			}
		},
		methods: {
			goRegister(){
				uni.navigateTo({
					url:'/pages/register/register'
				})
			},
			clearFn(){
				this.phone = '',
				this.password = ''
			},
			async LoginFn(){
				await loginFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					password:this.password,
					phone:this.phone
				})
				.then(
					content =>{
						console.log(content);
						let {code,msg,token} = content;
						if(code == 200){
							uni.setStorage({
								key: 'token',
								data: token,
								success: function () {
									uni.showModal({
										title: '登录成功',
										content: '跳转我的',
										success: function (res) {
											if (res.confirm) {
												uni.switchTab({
													url:'/pages/home/home'
												})
											} else if (res.cancel) {
												
											}
										}
									});
								}
							})
						}
						else if(code == 202){
							uni.showToast({
								title: '输入不正确',
								duration: 2000
							});
						}
						else{
							uni.showToast({
								title: '该手机号未注册',
								duration: 2000
							});
						}
					}
				)
			}
		}
	}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
		// background: linear-gradient(#fff,#3d88f7);
	}
	.login{
		width: 100%;
		height: 100%;
		background: linear-gradient(#fff,#3d88f7);
		.photo{
			width: 100%;
			text-align: center;
			margin-bottom: 100rpx;
			image{
				margin: 0 auto;
				width: 400rpx;
				border-radius: 50%;
			}
		}
		.phone{
			margin: 0 auto;
			width: 600rpx;
			height: 80rpx;
			border-radius: 80rpx;
			border: 1px solid black;
			padding-left: 40rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
		}
		.password{
			margin: 0 auto;
			width: 600rpx;
			height: 80rpx;
			border-radius: 80rpx;
			border: 1px solid black;
			padding-left: 40rpx;
			margin-bottom: 50rpx;
			font-size: 28rpx;
		}
		.btn{
			margin: 0 auto;
			width: 500rpx;
			height: 50px;
			border-radius: 50px;
			border: 1px solid black;
			background-color: #292b74;
			color: #fff;
		}
		.bottom{
			margin-top: 50rpx;
			display: flex;
			color: #fff;
			text-decoration: underline;
			justify-content: space-around;
		}
	}
</style>
